<template>
  <view class="content">
    <view class="info-card">
      <view class="card-title">团体卡申请主体信息</view>
      <view class="info-item">
        <text class="label">申请企业</text>
        <text class="value">{{cardInfo.companyName}}</text>
      </view>
      <view class="info-item">
        <text class="label">申请人姓名</text>
        <text class="value">{{cardInfo.applicantName}}</text>
      </view>
      <view class="info-item">
        <text class="label">申请人联系方式</text>
        <text class="value">{{cardInfo.phoneNumber}}</text>
      </view>
    </view>

    <view class="member-count">
      <text class="count-label">人员信息</text>
      <text class="count-value">{{personnelList.length}}人</text>
    </view>
    <up-swipe-action>
      <up-swipe-action-item

        :options="options"
        class="member-card_wrap"
        v-for="(item,index) in personnelList"
        :key="item"
        :name="index"
        @click="handleDelete"
      >
        <view class="member-card">
          <view class="member-header">
            <text class="member-name">{{item.name}}</text>
            <text class="edit-text" @click="editJump(item)">编辑信息</text>
          </view>
          <view class="amount-info">
            <view class="amount-item">
              <text class="amount-label">累计消费金额</text>
              <text class="amount-value">{{item.totalConsumptionAmount}}</text>
            </view>
            <view class="amount-item">
              <text class="amount-label">授权额度</text>
              <text class="amount-value">{{item.authAmount}}</text>
            </view>
            <view class="amount-item">
              <text class="amount-label">本月消费金额</text>
              <text class="amount-value">{{item.monthConsumptionAmount}}</text>
            </view>
          </view>
          <view class="detail-link" @click="goJump(item)">
            <text>消费明细 ></text>
          </view>
        </view>
      </up-swipe-action-item>
    </up-swipe-action>
    <up-modal
      :show="show"
      :showCancelButton="true"
      title="提示"
      :closeOnClickOverlay="true"
      @confirm="confirm"
      @cancel="cancel"
      @close="cancel"
      content='确定是否要删除该成员吗'>
      <view class="slot-content">
        确定是否要删除该成员吗
      </view>
    </up-modal>
  </view>
</template>

<script setup>
import { ref, reactive,defineProps ,defineEmits} from 'vue'

const show = ref(false)
const props = defineProps({
   cardInfo : {
    type: Object,
    default: () => {
      return {}
    }
  },
  personnelList:{
     type: Array,
     default: () => {
      return []
    }
  }
})
let deleteItem = null
const emit = defineEmits(['sendJump','editJump','handleDelete'])
const options = reactive([{
  text: '删除'
}]);
function goJump(item){
  emit('sendJump',item)
}
function editJump(item){
  emit('editJump',item)
}
function handleDelete (e){
  deleteItem ={    index:e.name,
    item:props.personnelList[e.name]
  }
  show.value = true
}
const confirm =()=>{
  emit('handleDelete',deleteItem,()=>{
    show.value = false
  })
}
const cancel = ()=>{
  show.value = false
}
</script>
<script>
 export default {
  options:{
    styleIsolation: "shared"
  }
}
</script>


<style scoped lang="scss">
.content {
  margin-top: 100rpx;
  box-sizing: border-box;
  padding:  0 32rpx 32rpx 32rpx;

}

.info-card {
  background: #fff;
  border-radius: 12px;
  padding: 32rpx;
  margin-bottom: 32rpx;
}

.card-title {
  font-size: 16px;
  color: #333;
  font-weight: 500;
  margin-bottom: 32rpx;
}

.info-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 24rpx;
}

.info-item:last-child {
  margin-bottom: 0;
}

.label {
  font-size: 14px;
  color: #666;
}

.value {
  font-size: 14px;
  color: #333;
}

.member-count {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
  border-radius: 12px;
  padding: 32rpx;
  margin-bottom: 32rpx;
}

.count-label {
  font-size: 14px;
  color: #333;
}

.count-value {
  font-size: 14px;
  color: #666;
}
//::v-slotted .u-swipe-action-item{
//  margin-bottom: 32rpx !important;
//  //background: #fff;
//  border-radius: 12rpx;
//}
::v-deep .u-swipe-action-item{
  margin-bottom: 32rpx !important;
  //background: #fff;
  border-radius: 12rpx;
}
//:deep .u-swipe-action-item{
//  margin-bottom: 32rpx !important;
//  //background: #fff;
//  border-radius: 12rpx;
//}
.member-card_wrap{
  margin-bottom: 32rpx !important;
}
.member-card {
  background: #fff;
  border-radius: 12px;
  padding: 32rpx;

  position: relative;
}

.member-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 32rpx;
}

.member-name {
  font-size: 14px;
  color: #333;
  font-weight: 500;
}

.edit-text {
  font-size: 14px;
  color: #666;
}

.amount-info {
  display: flex;
  justify-content: space-between;
  margin-bottom: 24rpx;
}

.amount-item {
  display: flex;
  flex-direction: column;
}

.amount-label {
  font-size: 12px;
  color: #999;
  margin-bottom: 8rpx;
}

.amount-value {
  font-size: 16px;
  color: #333;
  font-weight: 500;
}

.detail-link {
  text-align: right;
}

.detail-link text {
  font-size: 14px;
  color: #666;
}

.delete-btn {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 120rpx;
  height: 100%;
  background: #ff4d4f;
  color: #fff;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0 12px 12px 0;
}

.add-btn {
  width: 100%;
  height: 88rpx;
  background: #2c3e50;
  color: #fff;
  font-size: 16px;
  border-radius: 44rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
